﻿<!DOCTYPE html>
<html>
  <head>
    <title>The Eight</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="css/font-awesome.css">
    <link rel="stylesheet" href="css/owl.carousel.css">
    <link rel="stylesheet" href="css/jquery.fancybox.css">
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/indent.css">
    <link rel="stylesheet" href="fonts/fi/flaticon.css">
    <link rel="stylesheet" href="rs-plugin/css/settings.css">
    <link rel="stylesheet" href="rs-plugin/css/layers.css">
    <link rel="stylesheet" href="rs-plugin/css/navigation.css">
    <link rel="stylesheet" type="text/css" href="tuner/css/colorpicker.css">
    <link rel="stylesheet" type="text/css" href="tuner/css/styles.css">
  </head>
  <body>
    <!-- header page-->
    <header>
      <!-- Navigation panel-->
      <nav class="main-nav transparent stick-fixed">
        <div class="full-wrapper relative clearfix container">
          <!-- Logo ( * your text or image into link tag *)-->
          <div class="nav-logo-wrap local-scroll"><a href="index.html" class="logo"><img src="img/the8-logo.png" data-at2x="img/the8-logo@2x.png" alt><img src="img/the8-logo-sticky.png" data-at2x="img/the8-logo-sticky@2x.png" alt class="sticky-logo"></a></div>
          <!-- Main Menu-->
          <div class="inner-nav desktop-nav switch-menu">
            <ul class="clearlist">
              <!-- Item With Sub-->
              <li><a href="index.html" class="mn-has-sub active">Home <i class="fa fa-angle-down button_open"></i></a>
                <ul class="mn-sub">
                  <li><a href="index.html">Standart Slider</a></li>
                  <li><a href="index-slider.html">Full-Screen Slider</a></li>
                  <li class="active"><a href="index-video.html">Video Background</a></li>
                </ul>
              </li>
              <!-- End Item With Sub-->
              <!-- Item With Sub-->
              <li><a href="page-about-us.html" class="mn-has-sub">Pages <i class="fa fa-angle-down button_open"></i></a>
                <!-- Sub-->
                <ul class="mn-sub">
                  <li><a href="page-about-us.html">About Us</a></li>
                  <li><a href="page-services.html">Services</a></li>
                  <li><a href="page-procces.html">Our Procces</a></li>
                  <li><a href="page-our-team.html">Our Team</a></li>
                  <li><a href="page-profile.html">Profile</a></li>
                  <li><a href="page-components.html">Components</a></li>
                </ul>
                <!-- End Sub-->
              </li>
              <!-- End Item With Sub-->
              <!-- Item With Sub-->
              <li><a href="portfolio-3-col.html" class="mn-has-sub">Portfolio <i class="fa fa-angle-down button_open"></i></a>
                <!-- Sub-->
                <ul class="mn-sub">
                  <li><a href="portfolio-3-col.html">Three Columns</a></li>
                  <li><a href="portfolio-4-col.html">Four Columns</a></li>
                  <li><a href="portfolio-with-sidebar.html">With Sidebar</a></li>
                  <li><a href="portfolio-gallery.html">Gallery</a></li>
                  <li><a href="page-portfolio-single.html">Portfolio Single</a></li>
                </ul>
                <!-- End Sub-->
              </li>
              <!-- End Item With Sub-->
              <!-- Item With Sub-->
              <li><a href="blog-sidebar-right.html" class="mn-has-sub">Blog <i class="fa fa-angle-down button_open"></i></a>
                <!-- Sub-->
                <ul class="mn-sub">
                  <li><a href="blog-2-col.html" class="mn-has-sub">Columns<i class="fa fa-angle-right pull-right button_open"></i></a>
                    <ul class="mn-sub to-left">
                      <li><a href="blog-2-col.html">Two Columns</a></li>
                      <li><a href="blog-2-col-sidebar.html">Two Columns + Sidebar</a></li>
                      <li><a href="blog-3-col.html">Three Columns</a></li>
                    </ul>
                  </li>
                  <li><a href="blog-sidebar-right.html">Blog Right Sidebar</a></li>
                  <li><a href="blog-medium-img.html">Medium Images</a></li>
                  <li><a href="blog-small-img.html">Small Images</a></li>
                  <li><a href="blog-single.html">Blog Single</a></li>
                </ul>
                <!-- End Sub-->
              </li>
              <!-- End Item With Sub-->
              <!-- Item With Sub-->
              <li><a href="shop-grid.html" class="mn-has-sub">Shop <i class="fa fa-angle-down button_open"></i></a>
                <!-- Sub-->
                <ul class="mn-sub">
                  <li><a href="shop-grid.html">Shop Grid</a></li>
                  <li><a href="shop-cart.html">Shop Cart</a></li>
                  <li><a href="shop-checkout.html">Shop Checkout</a></li>
                  <li><a href="shop-single.html">Shop Single Product</a></li>
                </ul>
                <!-- End Sub-->
              </li>
              <!-- End Item With Sub-->
              <!-- Item-->
              <li><a href="page-contact.html">Contact</a></li>
              <!-- End Item-->
              <!-- Cart-->
              <li class="menu-shop-card"><a href="#" class="mn-has-sub"><i class="flaticon-shopping-carts6 button_open"><span>2</span></i></a>
                <ul class="mn-sub right">
                  <li>
                    <aside class="widget-top-sellers shop-cart-menu">
                      <p>You have 
                        <span2 class="tx-color-2">item(s)</span2> in your shopping bag
                      </p>
                      <!-- item recent post-->
                      <div class="item-top-sellers clearfix"><img src="pic/shop/70x70/6.jpg" data-at2x="pic/shop/70x70/6@2x.jpg" alt>
                        <h3 class="title"><a href="shop-single.html">Phasellus accumsan cur</a></h3>
                        <div class="price">1 x $55.00</div>
                      </div>
                      <!-- ! item recent post-->
                      <!-- item recent post-->
                      <div class="item-top-sellers clearfix"><img src="pic/shop/70x70/1.jpg" data-at2x="pic/shop/70x70/1@2x.jpg" alt>
                        <h3 class="title"><a href="shop-single.html">Aenean posuere tortor</a></h3>
                        <div class="price">3 x $120.00</div>
                      </div>
                      <!-- ! item recent post-->
                      <hr class="mt-10 mb-10">
                      <div class="sub-total clearfix">Sub Total: <span>$2400</span></div>
                      <hr class="mt-10 mb-10">
                      <div class="row">
                        <div class="col-xs-6"><a href="shop-cart.html" class="cws-button full-width">View Cart</a></div>
                        <div class="col-xs-6"><a href="shop-checkout.html" class="cws-button full-width">Checkout</a></div>
                      </div>
                    </aside>
                  </li>
                </ul>
              </li>
              <!-- End Cart-->
              <!-- Search-->
              <li class="search"><a href="#" class="mn-has-sub"><i class="flaticon-magnifying-glass34 search-icon"></i></a>
                <ul class="search-sub">
                  <li>
                    <div class="container">
                      <div class="mn-wrap">
                        <form method="post" class="form">
                          <div class="search-wrap">
                            <input type="text" placeholder="Search . . ." class="form-control search-field">
                          </div>
                        </form>
                      </div>
                      <div class="close-button flaticon-cancel30"></div>
                    </div>
                  </li>
                </ul>
              </li>
              <!-- End Search-->
            </ul><a href="#" class="menu-bar"><span class="ham"></span></a>
          </div>
          <!-- End Main Menu-->
        </div>
      </nav>
      <!-- End Navigation panel-->
    </header>
    <!-- ! header page-->
    <div class="row_bg">
      <!-- bg video-->
      <div data-video-source="4GC0jGODGeY" data-video-id="video-559a112d1873b" data-img-url="pic/video-pic+.jpg" class="row_bg_video cws_Yt_video_bg">
        <div id="video-559a112d1873b"></div>
      </div>
      <!-- ! bg video-->
      <div class="content-video-bg slider">
        <div class="tp-banner-container">
          <div class="tp-banner">
            <ul>
              <li data-masterspeed="700" data-slotamount="7" data-transition="fade">
                <div data-x="['left','center','center','center']" data-hoffset="0" data-y="center" data-voffset="0%" data-width="['1170px','700px','500px','300px']" data-transform_in="y:-50px;opacity:0;s:1500;e:Power3.easeInOut;" data-transform_out="y:50px;opacity:0;s:1000;e:Power2.easeInOut;s:1000;e:Power2.easeInOut;" data-start="400" class="tp-caption sl-content text-center"><img src="img/the8-logo-sticky@2x.png" data-at2x="img/the8-logo-sticky@2x.png" alt>
                  <div class="sl-title text-white">MEET THE EIGHT</div>
                  <p class="text-white">Creative, Multipurpose WordPress Theme</p><a href="#" class="cws-button white">Discover Now</a>
                </div>
              </li>
              <li data-masterspeed="700" data-transition="fade">
                <div data-x="['left','center','center','center']" data-hoffset="0" data-y="center" data-voffset="0%" data-width="['1170px','700px','500px','300px']" data-transform_in="y:-50px;opacity:0;s:1500;e:Power3.easeInOut;" data-transform_out="y:50px;opacity:0;s:1000;e:Power2.easeInOut;s:1000;e:Power2.easeInOut;" data-start="400" class="tp-caption sl-content text-center"><img src="img/the8-logo-sticky@2x.png" data-at2x="img/the8-logo-sticky@2x.png" alt>
                  <div class="sl-title text-white">ENDLESS POSSIBILITIES</div>
                  <p class="text-white">The best solution for your business.</p><a href="#" class="cws-button white">Discover Now</a>
                </div>
              </li>
              <li data-masterspeed="700" data-transition="fade">
                <div data-x="['left','center','center','center']" data-hoffset="0" data-y="center" data-voffset="0%" data-width="['1170px','700px','500px','300px']" data-transform_in="y:-50px;opacity:0;s:1500;e:Power3.easeInOut;" data-transform_out="y:50px;opacity:0;s:1000;e:Power2.easeInOut;s:1000;e:Power2.easeInOut;" data-start="400" class="tp-caption sl-content text-center"><img src="img/the8-logo-sticky@2x.png" data-at2x="img/the8-logo-sticky@2x.png" alt>
                  <div class="sl-title text-white">SIMPLE & POWERFUL </div>
                  <p class="text-white">Create with no limits.</p><a href="#" class="cws-button white">Discover Now</a>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <!-- section service-->
    <section class="page-section">
      <div class="container">
        <!-- title section-->
        <h2 class="title-section text-center mt-0 mb-0">About <span>The Eight</span></h2>
        <!-- ! title section-->
        <div class="divider gray mt-20 mb-25"></div>
        <p class="text-center mb-50">Curabitur at lacus ac velit ornare lobortis. Curabitur a felis in nunc fringilla tristique. Morbi mattis ullamcorper velit. Phasellus gravida semper<br> nisi. Nullam vel sem. Pellentesque libero tortor, tincidunt et, tincidunt eget, semper nec, quam.</p>
        <div class="row mb-60 cws-multi-col">
          <div class="col-md-4 col-sm-6 mb-md-30">
            <div class="service-center-icon gray text-center pb-60 pt-60">
              <!-- bg icon--><i class="cws-icon flaticon-layer13 gray mb-20"></i>
              <!-- ! bg icon-->
              <!-- title-->
              <h3 class="mt-0 mb-0">Parallax Sections</h3>
              <!-- ! title-->
              <div class="divider mt-10 mb-5 gray-darknest mini"></div>
              <p>Lorem ipsum dolor sit amet, consectetuer adip iscing elit. Aenean  ligula ... </p>
            </div>
          </div>
          <div class="col-md-4 col-sm-6 mb-md-30">
            <div class="service-center-icon color-4 text-center pb-60 pt-60">
              <!-- bg icon--><i class="cws-icon flaticon-play-video3 text-white mb-20"></i>
              <!-- ! bg icon-->
              <!-- title-->
              <h3 class="mt-0 mb-0 text-white">Video Sections</h3>
              <!-- ! title-->
              <div class="divider mt-10 mb-5 white mini"></div>
              <p class="text-white">Lorem ipsum dolor sit amet, consectetuer adip iscing elit. Aenean ligula ... </p>
            </div>
          </div>
          <div class="col-md-4 col-sm-6">
            <div class="service-center-icon text-center pb-60 pt-60">
              <!-- bg icon--><i class="cws-icon flaticon-raindrop text-white mb-20"></i>
              <!-- ! bg icon-->
              <!-- title-->
              <h3 class="mt-0 mb-0 text-white">Blur Sections</h3>
              <!-- ! title-->
              <div class="divider mt-10 mb-5 white mini"></div>
              <p class="text-white">Lorem ipsum dolor sit amet, consectetuer adip iscing elit. Aenean ligula ... </p>
            </div>
          </div>
        </div>
        <div class="row mt-0 flex-box">
          <div class="col-md-6 mb-md-50">
            <!-- toogle-->
            <div class="toggle color-2 mb-40">
              <div class="content-title active"> <i class="flaticon-arrow487 toggle-icon"></i><span class="active"><i class="flaticon-lights7"></i>Estibulum ante ipsum primis in faucibus orci luctus et ultrices</span></div>
              <div style="display: block" class="content">Cras posuere vel ipsum ac varius. Nam hendrerit odio eget diam venenatis, in eros tempus ante blandit. Aenean accumsan tellus leo.</div>
              <div class="content-title"> <i class="flaticon-arrow487 toggle-icon"></i><span><i class="flaticon-diamond7"></i>Estibulum ante ipsum primis in faucibus orci luctus et ultrices.</span></div>
              <div class="content">Cras posuere vel ipsum ac varius. Nam hendrerit odio eget diam venenatis, in eros tempus ante blandit. Aenean accumsan tellus leo.</div>
              <div class="content-title"> <i class="flaticon-arrow487 toggle-icon"></i><span><i class="flaticon-smartphones23"></i>Estibulum ante ipsum primis in faucibus orci luctus et ultrices.</span></div>
              <div class="content">Cras posuere vel ipsum ac varius. Nam hendrerit odio eget diam venenatis, in eros tempus ante blandit. Aenean accumsan tellus leo.</div>
              <div class="content-title"> <i class="flaticon-arrow487 toggle-icon"></i><span><i class="flaticon-layer13"></i>Maecenas tempus, tellus eget condimentum rhoncus quam</span></div>
              <div class="content">Cras posuere vel ipsum ac varius. Nam hendrerit odio eget diam venenatis, in eros tempus ante blandit. Aenean accumsan tellus leo.</div>
            </div>
            <!-- ! toogle--><a href="#" class="cws-button color-2 with-icon">Learn More <i class="flaticon-lights7"></i></a>
          </div>
          <div class="col-md-6 flex-item-end"><img src="pic/woman-with-glasses.png" alt class="fix-img-3"></div>
        </div>
      </div>
    </section>
    <!-- ! section section-->
    <!-- double parallax-->
    <div class="container-fluid">
      <div class="row flex-box">
        <div style="background-image: url('pic/parallax-half-1.jpg');" class="col-md-6 bg-section visible-md-block visible-lg-block"></div>
        <div class="col-md-6 pt-70 pb-70 half-width-service bg-gray-dark"><i class="icon-bg-rc flaticon-cogwheels10"></i>
          <div class="row">
            <div class="col-md-8 half-section">
              <!-- section title-->
              <h2 class="title-section mt-0 mb-0 text-white">Our Servicess</h2>
              <!-- ! section title-->
              <div class="divider left mt-20 mb-25"></div>
              <p class="mb-50 text-white">Etiam Etiam imperdiet imperdiet orci. Nunc nec neque. Phasellus leo dolor, tempus non, auctor et, hendrerit quis, nisi.</p>
              <!-- service item-->
              <div class="service-item icon-right mb-40"><i class="flaticon-lights7 cws-icon mt-0 text-white only-border"></i>
                <h3 class="text-white">1. Research & Planning</h3>
                <p class="text-white text-w-light">Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhonesus.</p>
              </div>
              <!-- ! service item-->
              <!-- service item-->
              <div class="service-item icon-right mb-40"><i class="flaticon-mug16 cws-icon mt-0 text-white only-border"></i>
                <h3 class="text-white">2. Concept & Design</h3>
                <p class="text-white text-w-light">Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhonesus.</p>
              </div>
              <!-- ! service item-->
              <!-- service item-->
              <div class="service-item icon-right"><i class="flaticon-laptops2 cws-icon mt-0 text-white only-border"></i>
                <h3 class="text-white">3. Testing & Developing</h3>
                <p class="text-white text-w-light">Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhonesus.</p>
              </div>
              <!-- ! service item-->
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- ! double parallax-->
    <!-- section what we do-->
    <section class="page-section">
      <div class="container">
        <h2 class="title-section mb-0 mt-0 text-center">What We Do</h2>
        <div class="divider gray mb-20 mt-25"></div>
        <p class="text-center mb-50">Curabitur at lacus ac velit ornare lobortis. Curabitur a felis in nunc fringilla tristique. Morbi mattis ullamcorper velit. Phasellus gravida semper<br> nisi. Nullam vel sem. Pellentesque libero tortor, tincidunt et, tincidunt eget, semper nec, quam.</p>
        <div class="row">
          <div class="col-md-6 mb-md-50">
            <!-- accordion-->
            <div class="accordion mt-20">
              <div class="content-title"> <span class="active"><i class="accordion-icon"></i>Estibulum ante ipsum primis in faucibus orci luctus et.</span></div>
              <div class="content">Cras posuere vel ipsum ac varius. Nam hendrerit odio eget diam venenatis, in tempus ante blandit. Aenean accumsan tellus leo.</div>
              <div class="content-title"> <span><i class="accordion-icon"></i>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</span></div>
              <div class="content">Cras posuere vel ipsum ac varius. Nam hendrerit odio eget diam venenatis, in tempus ante blandit. Aenean accumsan tellus leo.</div>
              <div class="content-title"> <span><i class="accordion-icon"></i>Sed ac nibh id lectus tincidunt vulputate ullamcorper in dui.</span></div>
              <div class="content">Cras posuere vel ipsum ac varius. Nam hendrerit odio eget diam venenatis, in tempus ante blandit. Aenean accumsan tellus leo.</div>
            </div>
            <!-- ! accordion-->
          </div>
          <div class="col-md-6">
            <!-- skill bar item-->
            <div class="skill-bar st-color-2">
              <div class="name">Branding<span class="skill-bar-perc"></span></div>
              <div class="bar"><span data-value="60" class="cp-bg-color skill-bar-progress"></span></div>
            </div>
            <!-- ! skill bar item-->
            <!-- skill bar item-->
            <div class="skill-bar st-color-4">
              <div class="name">Development<span class="skill-bar-perc"></span></div>
              <div class="bar"><span data-value="70" class="cp-bg-color skill-bar-progress"></span></div>
            </div>
            <!-- ! skill bar item-->
            <!-- skill bar item-->
            <div class="skill-bar">
              <div class="name">Design<span class="skill-bar-perc"></span></div>
              <div class="bar"><span data-value="80" class="cp-bg-color skill-bar-progress"></span></div>
            </div>
            <!-- ! skill bar item-->
            <!-- skill bar item-->
            <div class="skill-bar st-color-3">
              <div class="name">Support<span class="skill-bar-perc"></span></div>
              <div class="bar"><span data-value="90" class="cp-bg-color skill-bar-progress"></span></div>
            </div>
            <!-- ! skill bar item-->
          </div>
        </div>
      </div>
    </section>
    <!-- ! section what we do-->
    <!-- section parallax counter-->
    <section class="page-section cws_prlx_section pt-70 pb-70 bt-gray bb-gray"><img src="pic/map.png" alt class="cws_prlx_layer">
      <div class="container">
        <div class="row">
          <div class="col-md-3 col-xs-6 mb-ms-50">
            <!-- counter block-->
            <div class="counter-block border-none"><i class="counter-icon tx-color-4 flaticon-social-network156"></i>
              <div data-count="4350" class="counter gray-d">0</div>
              <div class="count-divider gray-d"></div>
              <div class="counter-name text-uppercase gray-d">User Online</div>
            </div>
            <!-- ! counter block-->
          </div>
          <div class="col-md-3 col-xs-6 mb-md-50">
            <!-- counter block-->
            <div class="counter-block border-none"><i class="counter-icon tx-color-4 flaticon-diamond7"></i>
              <div data-count="5600" class="counter gray-d">0</div>
              <div class="count-divider gray-d"></div>
              <div class="counter-name text-uppercase gray-d">Prizes Win</div>
            </div>
            <!-- counter block-->
          </div>
          <div class="col-md-3 col-xs-6">
            <!-- counter block-->
            <div class="counter-block border-none"><i class="counter-icon tx-color-4 flaticon-hearts49"></i>
              <div data-count="7200" class="counter gray-d">0</div>
              <div class="count-divider gray-d"></div>
              <div class="counter-name text-uppercase gray-d">Happy Customers</div>
            </div>
            <!-- ! counter block-->
          </div>
          <div class="col-md-3 col-xs-6">
            <!-- counter block-->
            <div class="counter-block border-none"><i class="counter-icon tx-color-4 flaticon-portfolio2"></i>
              <div data-count="8190" class="counter gray-d">0</div>
              <div class="count-divider gray-d"></div>
              <div class="counter-name text-uppercase gray-d">Awesome Projects</div>
            </div>
            <!-- ! counter block-->
          </div>
        </div>
      </div>
    </section>
    <!-- ! section parallax counter-->
    <!-- page section about-->
    <section class="page-section">
      <div class="container">
        <div class="row">
          <div class="col-md-5 mb-md-50">
            <!-- section title-->
            <h2 class="title-section mt-0 mb-0">Join Our <span>Product</span></h2>
            <!-- ! section title-->
            <div class="divider gray left mt-20 mb-25"></div>
            <p class="mb-20">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commo do ligula eg et dolor. Aenean massa.</p>
            <!-- list-->
            <ul class="mb-25 color-2">
              <li>Etiam lobortis nulla mi, ac lacinia mauris </li>
              <li>Donec tempor erat vel scelerisque posue</li>
              <li>Nam elementum elit eget tellus faucibus</li>
              <li>Aliquam turpis nibh, dictum eu consequat</li>
            </ul><a href="#" class="cws-button alt">View Project</a><a href="#" class="cws-button">Buy Theme</a>
          </div>
          <div class="col-md-7"><img src="pic/1920-img-3.jpg" alt class="mt-10"></div>
        </div>
      </div>
      <!-- list-->
    </section>
    <!-- ! page section about-->
    <!-- section parallax counter-->
    <section class="page-section cws_prlx_section pt-70 pb-70"><img src="pic/1920x1280-img-3.jpg" alt class="cws_prlx_layer">
      <div class="overlay pattern opacity-8"></div>
      <div class="container">
        <div class="row">
          <div class="col-md-12">
            <h2 class="title-section mt-0 mb-0 text-center text-white">Subscribe To Our Newsletter</h2>
            <div class="divider white mt-25 mb-30"></div>
            <form action="#" class="form subscribe-form">
              <input type="text" placeholder="Enter Your Email ...">
              <button type="submit" class="subscribe-submit">SUBSCRIBE</button>
            </form>
          </div>
        </div>
      </div>
    </section>
    <!-- ! section parallax counter-->
    <!-- section project-->
    <section class="page-section pb-70">
      <div class="container p-relative">
        <div class="row">
          <div class="col-md-10 col-md-offset-1">
            <h2 class="title-section mb-0 mt-0 text-center">Recent Projects</h2>
            <div class="divider mb-20 mt-25"></div>
            <p class="text-center mb-50">Curabitur at lacus ac velit ornare lobortis. Curabitur a felis in nunc fringilla tristique. Morbi mattis ullamcorper velit. Phasellus gravida semper nisi. Nullam vel sem. Pellentesque libero tortor, tincidunt et, tincidunt eget, semper nec, quam.</p>
          </div>
        </div>
        <div class="row mt-0 cws-multi-col">
          <div class="col-md-4 col-sm-6">
            <!-- portfolio item-->
            <div class="portfolio-item text-center">
              <!-- media-->
              <div class="pic"><img src="pic/portfolio/370x370/4.jpg" data-at2x="pic/portfolio/370x370/4@2x.jpg" alt>
                <div class="hover-effect alt"></div>
                <div class="links"><a href="pic/portfolio/370x370/4@2x.jpg" class="link-icon alt flaticon-magnifying-glass84 fancy"></a><a href="page-portfolio-single.html" class="link-icon alt flaticon-return13"></a></div>
              </div>
              <!-- ! media-->
              <!-- portfolio title-->
              <h3 class="portfolio-title">Vestibulum ante ipsum primis</h3>
              <p class="description">Fusce risus nisl, viverra et, tempor et, pretium in, sapien. Donec venenatis vulputate lorem.</p>
            </div>
            <!-- ! portfolio item-->
          </div>
          <div class="col-md-4 col-sm-6">
            <!-- portfolio item-->
            <div class="portfolio-item text-center">
              <!-- media-->
              <div class="pic"><img src="pic/portfolio/370x370/6.jpg" data-at2x="pic/portfolio/370x370/6@2x.jpg" alt>
                <div class="hover-effect alt"></div>
                <div class="links"><a href="pic/portfolio/370x370/6@2x.jpg" class="link-icon alt flaticon-magnifying-glass84 fancy"></a><a href="page-portfolio-single.html" class="link-icon alt flaticon-return13"></a></div>
              </div>
              <!-- ! media-->
              <!-- portfolio title-->
              <h3 class="portfolio-title">Donec posuere vulputate arcu</h3>
              <p class="description">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
            </div>
            <!-- ! portfolio item-->
          </div>
          <div class="col-md-4 col-sm-6">
            <!-- portfolio item-->
            <div class="portfolio-item text-center">
              <!-- media-->
              <div class="pic"><img src="pic/portfolio/370x370/5.jpg" data-at2x="pic/portfolio/370x370/5@2x.jpg" alt>
                <div class="hover-effect alt"></div>
                <div class="links"><a href="pic/portfolio/370x370/5@2x.jpg" class="link-icon alt flaticon-magnifying-glass84 fancy"></a><a href="page-portfolio-single.html" class="link-icon alt flaticon-return13"></a></div>
              </div>
              <!-- ! media-->
              <!-- portfolio title-->
              <h3 class="portfolio-title">Phasellus accumsan cursus velit</h3>
              <p class="description">Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi.</p>
            </div>
            <!-- ! portfolio item-->
          </div>
        </div>
      </div>
    </section>
    <!-- ! section project-->
    <!-- section twitter-->
    <section class="page-section bg-gray bt-gray bb-gray">
      <div class="container">
        <!-- twitter full screen-->
        <div class="twitter-1 full-screen"></div>
        <!-- ! twitter full screen-->
      </div>
    </section>
    <!-- ! section twitter-->
    <!-- section contact-->
    <section class="page-section pt-0">
      <!--<div class="map-full-width map-wrapper">
        <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d25295.930156304785!2d16.371063311644324!3d48.208404844730474!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x476d07986fcad78b%3A0x73f5a4d267cc4174!2zTmFnbGVyZ2Fzc2UgMTAsIDEwMTAgV2llbiwg0JDQstGB0YLRgNC40Y8!5e0!3m2!1sru!2sua!4v1453294615596" allowfullscreen=""></iframe>
      </div>-->
      <div class="container">
        <div class="row mt-60">
          <div class="col-md-6 mb-md-70">
            <h2 class="mt-0 mb-30">How to find us</h2>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
            <hr>
            <address class="contact-address">
              <p><span>Address:</span> 250 Biscayne Blvd. (North) 11st Floor New Tower Miami, Florida 33148</p>
              <p><span>Phone number:</span> <a href="tel:180012345678">1-800-123-45678</a></p>
              <p><span>Email:</span> <a href="mailto:the8@gmail.com">the8@gmail.com</a></p>
            </address>
            <hr>
            <!-- social icons--><a href="#" class="cws-social flaticon-facebook55"></a><a href="#" class="cws-social flaticon-twitter1"></a><a href="#" class="cws-social fa fa-google-plus"></a><a href="#" class="cws-social flaticon-social-network106"></a><a href="#" class="cws-social flaticon-pinterest3"></a>
            <!-- ! social icons-->
          </div>
          <div class="col-md-6">
            <h2 class="mt-0 mb-30">Send a message</h2>
            <div class="widget-contact-form pb-0">
              <!-- contact-form-->
              <div id="feedback-form-errors" role="alert" class="alert alert-danger alt alert-dismissible fade in">
                <button type="button" data-dismiss="alert" aria-label="Close" class="close"><span aria-hidden="true">×</span></button><i class="alert-icon border flaticon-exclamation-mark1"></i><strong>Error Message!</strong><br>
                <div class="message"></div>
              </div>
              <div class="email_server_responce"></div>
              <form action="php/contacts-process.php" method="post" class="form contact-form alt clearfix">
                <input type="text" name="name" value="" size="40" placeholder="Your Name" aria-invalid="false" aria-required="true" class="form-row form-row-first">
                <input type="text" name="email" value="" size="40" placeholder="Your Email" aria-required="true" class="form-row form-row-last">
                <textarea name="message" cols="40" rows="4" placeholder="Your Message" aria-invalid="false" aria-required="true"></textarea>
                <input type="submit" value="Send Message" class="cws-button border-radius pull-right">
              </form>
              <!-- /contact-form-->
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- ! section contact-->
    <!-- footer-->
    <footer class="footer">
      <div class="container">
        <div class="row cws-multi-col">
          <div class="col-md-3 col-sm-6 mb-md-50">
            <div class="widget-footer text">
              <h3>About</h3>
              <div class="divider"></div>
              <p>Ut tincidunt nisl sapien, eget gravida quama vestibulum vitae. Ut ultrices purus quis tinci dunt rutrum proin commodo ipsum.</p>
              <p>Vestibulum vitae nisl quis elit tristique egesi tas eget sed nisi. Etiam mi sapien, luctus ac tempor quis, varius eu neque.</p>
            </div>
          </div>
          <div class="col-md-3 col-sm-6 mb-md-50">
            <div class="widget-footer">
              <h3>Recent posts</h3>
              <div class="divider"></div>
              <div class="recent-item clearfix"><a href="blog-single.html"><img src="pic/footer/7.jpg" data-at2x="pic/footer/7@2x.jpg" alt></a>
                <h4 class="recent-title"><a href="blog-single.html">Morbi Iaculis</a></h4>
                <p>Ut tincidunt nisl s apien, eget gravida sed nisi reet ... <a href="#">more</a></p>
              </div>
              <div class="recent-item clearfix"><a href="blog-single.html"><img src="pic/footer/8.jpg" data-at2x="pic/footer/8@2x.jpg" alt></a>
                <h4 class="recent-title"><a href="blog-single.html">Praesent sagittis</a></h4>
                <p>Ut tincidunt nisl s apien, eget gravida sed nisi reet ... <a href="#">more</a></p>
              </div>
            </div>
          </div>
          <div class="col-md-3 col-sm-6 mb-sm-50">
            <div class="widget-footer">
              <h3>Gallery</h3>
              <div class="divider"></div>
              <div class="gallery clearfix">
                <div class="gallery-item">
                  <div class="pic"><img src="pic/footer/1.jpg" alt data-at2x="pic/footer/1@2x.jpg">
                    <div class="hover-effect alt">
                      <div class="links"><a href="pic/footer/1@2x.jpg" class="link-icon alt flaticon-magnifying-glass84 fancy"></a></div>
                    </div>
                  </div>
                </div>
                <div class="gallery-item">
                  <div class="pic"><img src="pic/footer/2.jpg" alt data-at2x="pic/footer/2@2x.jpg">
                    <div class="hover-effect alt">
                      <div class="links"><a href="pic/footer/2@2x.jpg" class="link-icon alt flaticon-magnifying-glass84 fancy"></a></div>
                    </div>
                  </div>
                </div>
                <div class="gallery-item">
                  <div class="pic"><img src="pic/footer/3.jpg" alt data-at2x="pic/footer/3@2x.jpg">
                    <div class="hover-effect alt">
                      <div class="links"><a href="pic/footer/3@2x.jpg" class="link-icon alt flaticon-magnifying-glass84 fancy"></a></div>
                    </div>
                  </div>
                </div>
                <div class="gallery-item">
                  <div class="pic"><img src="pic/footer/4.jpg" alt data-at2x="pic/footer/4@2x.jpg">
                    <div class="hover-effect alt">
                      <div class="links"><a href="pic/footer/4@2x.jpg" class="link-icon alt flaticon-magnifying-glass84 fancy"></a></div>
                    </div>
                  </div>
                </div>
                <div class="gallery-item">
                  <div class="pic"><img src="pic/footer/5.jpg" alt data-at2x="pic/footer/5@2x.jpg">
                    <div class="hover-effect alt">
                      <div class="links"><a href="pic/footer/5@2x.jpg" class="link-icon alt flaticon-magnifying-glass84 fancy"></a></div>
                    </div>
                  </div>
                </div>
                <div class="gallery-item">
                  <div class="pic"><img src="pic/footer/6.jpg" alt data-at2x="pic/footer/6@2x.jpg">
                    <div class="hover-effect alt">
                      <div class="links"><a href="pic/footer/6@2x.jpg" class="link-icon alt flaticon-magnifying-glass84 fancy"></a></div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="col-md-3 col-sm-6">
            <div class="widget-footer">
              <h3>Contact us</h3>
              <div class="divider"></div>
              <address>
                <p>You can contact us via <a href="mailto:the8@gmail.com">the8@gmail.com</a></p><strong>Our address</strong>
                <p>250 Biscayne Blvd. (North) 11st Floor New World Tower Miami, Florida 33148</p><strong>Our phone</strong><br><a href="tel:180012345678">1-800-123-45678</a>
              </address>
            </div>
          </div>
        </div>
      </div>
      <div class="copyright">
        <div class="container">
          <div class="row">
            <div class="col-sm-8">
              <p>Copyrights ©2016: The8 - Premium Multipurpose WordPress Theme</p>
            </div>
            <div class="col-sm-4 text-right"><a href="#" class="cws-social flaticon-facebook55"></a><a href="#" class="cws-social flaticon-twitter1"></a><a href="#" class="cws-social fa fa-google-plus"></a><a href="#" class="cws-social flaticon-social-network106"></a><a href="#" class="cws-social flaticon-pinterest3"></a></div>
          </div>
        </div>
      </div>
    </footer>
    <div id="scroll-top"><i class="fa fa-angle-up"></i></div>
    <!-- ! footer-->
    <!--<script src="https://www.youtube.com/player_api"></script>-->
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery-ui.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.js"></script>
    <script type="text/javascript" src="js/owl.carousel.js"></script>
    <script type="text/javascript" src="js/jquery.sticky.js"></script>
    <script type="text/javascript" src="js/cws_parallax.js"></script>
    <script type="text/javascript" src="js/jquery.fancybox.pack.js"></script>
    <script type="text/javascript" src="js/jquery.fancybox-media.js"></script>
    <script type="text/javascript" src="js/jquery.isotope.min.js"></script>
    <script type="text/javascript" src="rs-plugin/js/jquery.themepunch.tools.min.js"></script>
    <script type="text/javascript" src="rs-plugin/js/jquery.themepunch.revolution.min.js"></script>
    <script type="text/javascript" src="rs-plugin/js/extensions/revolution.extension.slideanims.min.js"></script>
    <script type="text/javascript" src="rs-plugin/js/extensions/revolution.extension.layeranimation.min.js"></script>
    <script type="text/javascript" src="rs-plugin/js/extensions/revolution.extension.navigation.min.js"></script>
    <script type="text/javascript" src="rs-plugin/js/extensions/revolution.extension.parallax.min.js"></script>
    <script type="text/javascript" src="rs-plugin/js/extensions/revolution.extension.video.min.js"></script>
    <script type="text/javascript" src="rs-plugin/js/extensions/revolution.extension.actions.min.js"></script>
    <script type="text/javascript" src="rs-plugin/js/extensions/revolution.extension.kenburn.min.js"></script>
    <script type="text/javascript" src="rs-plugin/js/extensions/revolution.extension.migration.min.js"></script>
    <script type="text/javascript" src="js/jquery.validate.min.js"></script>
    <script type="text/javascript" src="js/jquery.form.min.js"></script>
    <script type="text/javascript" src="js/script.js"></script>
    <script type="text/javascript" src="js/bg-video/cws_self_vimeo_bg.js"></script>
    <script type="text/javascript" src="js/bg-video/jquery.vimeo.api.min.js"></script>
    <script type="text/javascript" src="js/bg-video/cws_YT_bg.js"></script>
    <!--<script type="text/javascript" src="js/jquery.tweet.js"></script>-->
    <script type="text/javascript" src="tuner/js/colorpicker.js"></script>
    <script type="text/javascript" src="tuner/js/scripts.js"></script>
    <script type="text/javascript" src="js/retina.min.js"></script>
  </body>
</html>